{% extends 'base/base.html' %}

{% block title %}个人中心 - 妙趣拾光锦盒{% endblock %}

{% block content %}
<section class="py-5">
    <div class="container">
        <h1 class="mb-4">个人中心</h1>
        
        <div class="row">
            <!-- 用户信息卡片 -->
            <div class="col-md-4 mb-4">
                <div class="card shadow-sm">
                    <div class="card-header bg-light">
                        <h5 class="mb-0"><i class="fas fa-user-circle me-2"></i>用户信息</h5>
                    </div>
                    <div class="card-body text-center">
                        <div class="mb-3">
                            {% if request.user.icon %}
                            <!-- 显示用户头像 -->
                            <img src="{{ request.user.icon }}" alt="{{ request.user.username }}" class="rounded-circle" style="width: 100px; height: 100px; object-fit: cover;">
                            {% else %}
                            <!-- 没有头像时显示首字母 -->
                            <div class="d-inline-block rounded-circle bg-primary text-white" style="width: 100px; height: 100px; line-height: 100px; font-size: 40px;">
                                {{ request.user.username|first|upper }}
                            </div>
                            {% endif %}
                        </div>
                        <h4 class="mb-2">{{ request.user.username }}</h4>
                        <p class="text-muted mb-3">{{ request.user.email }}</p>
                        <div class="mb-3">
                            <span class="badge bg-success mb-2">正常</span>
                        </div>
                    </div>
                </div>
                
                <!-- 账号信息卡片 -->
                <div class="card shadow-sm mt-4">
                    <div class="card-header bg-light">
                        <h5 class="mb-0"><i class="fas fa-info-circle me-2"></i>账号信息</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <h6 class="text-muted">用户ID</h6>
                            <p>{{ request.user.user_id }}</p>
                        </div>
                        <div class="mb-3">
                            <h6 class="text-muted">注册时间</h6>
                            <p>{{ request.user.date_joined|date:"Y-m-d H:i:s" }}</p>
                        </div>
                        <div class="mb-3">
                            <h6 class="text-muted">最后登录</h6>
                            <p>{{ request.user.last_login|date:"Y-m-d H:i:s" }}</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 功能区域 -->
            <div class="col-md-8">
                <div class="card shadow-sm mb-4">
                    <div class="card-header bg-light">
                        <ul class="nav nav-tabs card-header-tabs" id="profileTabs" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="orders-tab" data-bs-toggle="tab" data-bs-target="#orders" type="button" role="tab" aria-controls="orders" aria-selected="true">
                                    <i class="fas fa-shopping-bag me-1"></i>我的订单
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="cart-tab" data-bs-toggle="tab" data-bs-target="#cart" type="button" role="tab" aria-controls="cart" aria-selected="false">
                                    <i class="fas fa-shopping-cart me-1"></i>我的购物车
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">
                                    <i class="fas fa-cog me-1"></i>账号设置
                                </button>
                            </li>
                        </ul>
                    </div>
                    <div class="card-body">
                        <div class="tab-content" id="profileTabsContent">
                            <!-- 订单标签内容 -->
                            <div class="tab-pane fade show active" id="orders" role="tabpanel" aria-labelledby="orders-tab">
                                <h5 class="mb-3">我的订单</h5>
                                <div class="table-responsive">
                                    <table class="table table-hover">
                                        <thead class="table-light">
                                            <tr>
                                                <th>订单号</th>
                                                <th>下单时间</th>
                                                <th>金额</th>
                                                <th>状态</th>
                                                <th>操作</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% if orders %}
                                                {% for order in orders %}
                                                <tr>
                                                    <td>{{ order.order_no }}</td>
                                                    <td>{{ order.create_time|date:"Y-m-d H:i" }}</td>
                                                    <td>¥{{ order.total_amount }}</td>
                                                    <td>
                                                        {% if order.status == 1 %}
                                                        <span class="badge bg-warning">待支付</span>
                                                        {% elif order.status == 2 %}
                                                        <span class="badge bg-info">待发货</span>
                                                        {% elif order.status == 3 %}
                                                        <span class="badge bg-primary">已发货</span>
                                                        {% elif order.status == 4 %}
                                                        <span class="badge bg-success">已完成</span>
                                                        {% elif order.status == 5 %}
                                                        <span class="badge bg-danger">已取消</span>
                                                        {% endif %}
                                                    </td>
                                                    <td>
                                                        <a href="{% url 'order:detail' order.order_id %}" class="btn btn-sm btn-outline-primary">查看详情</a>
                                                    </td>
                                                </tr>
                                                {% endfor %}
                                            {% else %}
                                                <tr>
                                                    <td colspan="5" class="text-center py-3">
                                                        <div class="alert alert-info mb-0">
                                                            <i class="fas fa-info-circle me-2"></i>
                                                            您还没有订单记录
                                                        </div>
                                                    </td>
                                                </tr>
                                            {% endif %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            
                            <!-- 购物车标签内容 -->
                            <div class="tab-pane fade" id="cart" role="tabpanel" aria-labelledby="cart-tab">
                                <h5 class="mb-3">我的购物车</h5>
                                <div class="table-responsive">
                                    <table class="table table-hover">
                                        <thead class="table-light">
                                            <tr>
                                                <th>商品</th>
                                                <th>价格</th>
                                                <th>数量</th>
                                                <th>小计</th>
                                                <th>操作</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% if cart_items %}
                                                {% for item in cart_items %}
                                                <tr>
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            <img src="{{ item.image_url }}" alt="{{ item.name }}" width="50" class="me-3">
                                                            <span>{{ item.name }}</span>
                                                        </div>
                                                    </td>
                                                    <td>¥{{ item.discount_price }}</td>
                                                    <td>{{ item.quantity }}</td>
                                                    <td>¥{{ item.item_total }}</td>
                                                    <td>
                                                        <a href="{% url 'shopping:cart' %}" class="btn btn-sm btn-outline-primary">去购物车</a>
                                                    </td>
                                                </tr>
                                                {% endfor %}
                                            {% else %}
                                                <tr>
                                                    <td colspan="5" class="text-center py-3">
                                                        <div class="alert alert-info mb-0">
                            <i class="fas fa-info-circle me-2"></i>
                                                            您的购物车还是空的
                                                        </div>
                                                        <div class="mt-3">
                                                            <a href="{% url 'blindbox:list' %}" class="btn btn-primary">
                                                                <i class="fas fa-shopping-bag me-1"></i>去选购商品
                                                            </a>
                                                        </div>
                                                    </td>
                                                </tr>
                                            {% endif %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            
                            <!-- 设置标签内容 -->
                            <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">
                                <h5 class="mb-4">账号设置</h5>
                                
                                <form method="post" action="{% url 'accounts:update_profile' %}">
                                    {% csrf_token %}
                                    
                                    <div class="mb-3">
                                        <label for="username" class="form-label">用户名</label>
                                        <input type="text" class="form-control" id="username" name="username" value="{{ request.user.username }}" disabled>
                                        <div class="form-text text-muted">用户名不可修改</div>
                                    </div>
                                    
                                    <div class="mb-3">
                                        <label for="email" class="form-label">电子邮箱</label>
                                        <input type="email" class="form-control" id="email" name="email" value="{{ request.user.email }}">
                                    </div>
                                    
                                    <div class="mb-3">
                                        <label for="phone" class="form-label">手机号码</label>
                                        <input type="tel" class="form-control" id="phone" name="phone" value="{{ request.user.phone }}">
                                    </div>
                                    
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-save me-1"></i>保存修改
                                    </button>
                                </form>
                                
                                <hr class="my-4">
                                
                                <h5 class="mb-3">修改密码</h5>
                                <a href="{% url 'accounts:change_password' %}" class="btn btn-outline-secondary">
                                    <i class="fas fa-key me-1"></i>修改密码
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %} 